import {common} from '../api/url';
import pick from 'lodash.pick';
import {getAction, postAction, putAction} from '../api/manage';

export default  {
  data(){
    return {
      title: '操作', // 标题
      visible: false, // 是否显示
      drawerWidth:800,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      formItemLayout:{
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      modaltoggleFlag:true,
      confirmLoading: false, // 加载动画;
      entity:"",
      disableSubmit:false,
      // 验证
      formItems:[],
      validatorRules:{
        required:{required: true, message: '此字段非空!'},
        defaultMaxLength: {min: 0, max: 200, message: '长度不超过 200 个字符', trigger: 'blur'},
        dulicateCheck:{validator:this.doDulicateCheck},
        phone:{pattern:/^([0-9]{3,4}-)?[0-9]{7,8}$/, message:'请填写正确的电话号码'},
        email:{pattern:/^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/, message:'请填写正确的邮箱号码'},

      }
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
    this.form.getFieldDecorator('formItems', { initialValue: [], preserve: true });
  },
  mounted(){

  },
  methods:{
    getValidatorRoles(){
      return {
        required:{
          rules: [
            { required: true, message: '此字段非空!' },
            { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
          ]
        },
        defaultMaxLength: {
          rules: [
            {min: 0, max: 200, message: '长度不超过 200 个字符', trigger: 'blur'}
          ]
        },
        dulicateCheck: {
          rules:[
            { required: true, message: '此字段非空!' },
            { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' },
            { validator: this.doDulicateCheck}
          ]
        }

      }
    },

    //窗口最大化切换
    toggleScreen(){
      if(this.modaltoggleFlag){
        this.drawerWidth = window.innerWidth;
      }else{
        this.drawerWidth = 800;
      }
      this.modaltoggleFlag = !this.modaltoggleFlag;
    },
    add () {
      this.edit({});
    },
    edit (record) {
      this.resetScreenSize();
      this.form.resetFields();
      this.form.setFieldsValue({"formItems":this.formItems})
      this.model = Object.assign({}, record);
      this.afterFullData();
      this.visible = true;
      this.$nextTick(() => {
        let names = [];

        for(let k in this.form.getFieldsValue()){
          names.push(k);
        }
        this.form.setFieldsValue(pick(this.model, names));
      });
    },
    // 数据填充后
    afterFullData() {

    },
    handleCancel () {
      this.close()
    },

    handleOk () {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          let formData = Object.assign(this.model, values);

          that.confirmLoading = true;
          let obj;
          if (!this.model.id) {
            obj = this.saveAdd(formData);
          } else {
            obj = this.saveEdit(formData);
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          });
        }
      })
    },
    saveAdd(data){
      return postAction(this.url.add, data);
    },
    saveEdit(data){
      return putAction(this.url.edit, data);
    },
    close(){
      this.$emit('close');
      this.disableSubmit = false;
      this.visible = false;
      this.confirmLoading=false;

    },
    // 验证
    doDulicateCheck(rule, value, callback) {
      // rule {field:"", fullField:"", type:""}
      let tableName = this.entity;
      if(! tableName) {
        this.$message.warn("请先设置表名")
        callback("请先设置表名");
      }
      let params = {
        tableName: tableName,
        fieldName: rule.field,
        fieldVal: value,
        dataId: this.model.id,
      };
      getAction(common.dulicateCheck, params).then((res) => {
        if (res.success) {
          callback();
        } else {
          callback(res.message);
        }
      });
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize(){
      let screenWidth = document.body.clientWidth;
      if(screenWidth < 500){
        this.drawerWidth = screenWidth;
      }else{
        this.drawerWidth = 800;
      }
    },
  }

}
